<template>
	<div class="page project-create">
		<div class="project-group_wrap">
			<div class="project-group_btns">
				<div class="ibox project-group_label">大屏分组</div>
				<i @click="showAddGroup" class="el-icon-plus project-group_btn_add"></i>
			</div>
			<ul class="project-group_names">
				<li
					:class="{ 'active-group_name': activeMenu == 'all' }"
					class="project-group_name"
				>
					<div
						@click="
							presearchGroup('all', '', '');
							activeMenu = 'all';
						"
						class="ibox project-group_title"
					>
						<i class="el-icon-folder-opened"></i>&emsp;默认大屏
					</div>
					<div class="ibox project-group_count">{{ allAmount }}</div>
				</li>
				<!-- <li
					:class="{ 'active-group_name': activeMenu == 'unpublish' }"
					@click="presearchGroup('unpublish', '', '')"
					class="project-group_name"
				>
					<div class="ibox project-group_title">未发布</div>
					<div class="ibox project-group_count">{{ unpublishAmount }}</div>
				</li>
				<li
					:class="{ 'active-group_name': activeMenu == 'publish' }"
					@click="presearchGroup('publish', '', '')"
					class="project-group_name"
				>
					<div class="ibox project-group_title">已发布</div>
					<div class="ibox project-group_count">{{ publishAmount }}</div>
				</li>
				
				<li
					:class="{ 'active-group_name': activeMenu == 'ungroup' }"
					@click="presearchGroup('ungroup', '', '')"
					class="project-group_name"
				>
					<div class="ibox project-group_title">未分组</div>
					<div class="ibox project-group_count">{{ ungroupAmount }}</div>
				</li> -->
				<li
					:class="{ 'active-group_name': activeMenu == item._id }"
					:key="item._id"
					@click="presearchGroup(item._id, item.author, item._id)"
					class="project-group_name"
					v-for="item in groupList"
				>
					<div class="ibox project-group_title">
						<div class="title">
							<i class="el-icon-folder-opened"></i>&emsp;{{ item.name }}
						</div>
						<div class="option">
							<span class="m-r-10" @click="showEdit(item._id)"
								><i class="el-icon-edit"></i
							></span>
							<span @click="fetchdeletegroup(item._id, item.name)"
								><i class="el-icon-delete"></i
							></span>
						</div>
					</div>
					<div class="ibox project-group_count">{{ item.count }}</div>
				</li>
				<li
					:class="{ 'active-group_name': activeMenu == 'remove' }"
					@click="presearchGroup('remove', '', '')"
					class="project-group_name"
				>
					<div class="ibox project-group_title">
						<i class="el-icon-delete"></i>&emsp;回收站
					</div>
					<div class="ibox project-group_count">{{ removeAmount }}</div>
				</li>
				<!-- <div class="group-line"></div>
				<li
					:class="{ 'active-group_name': activeMenu == 'allpublish' }"
					@click="presearchGroup('allpublish', '', '')"
					class="project-group_name"
				>
					<div class="ibox project-group_title">已发布广场</div>
					<div class="ibox project-group_count">{{ allpublishAmount }}</div>
				</li> -->
			</ul>
		</div>
		<div class="project-list_wrap">
			<div class="project-list_header">
				<div class="project-list_info">
					<div class="ibox project-list_title">大屏列表</div>
					<!-- <span class="project-list_nums">1</span><span>个/还可以创建 </span>
					<span class="project-list_rests">4</span> 个
					<i class="el-icon-question"></i>
          <div class="ibox project-list_operator">管理配额</div>-->
				</div>
				<div class="project-list_search">
					<input
						class="project-list_search_input"
						placeholder="模糊搜索"
						type="text"
						v-model="search"
					/>
					<span @click="searchdata" class="project-list_search_icon">
						<i class="el-icon-search"></i>
					</span>
				</div>
				<div class="project-list_search">
					<y-select
						:options="sortList"
						v-model="sort"
						@change="searchdata()"
					></y-select>
				</div>
			</div>
			<div class="project-list_body">
				<div
					class="project-list_item project-list_active addNew"
					@click="onNewProject"
				>
					<i class="el-icon-circle-plus-outline"></i>
					<br />
					<span>新建大屏</span>
				</div>
				<div
					:key="item._id"
					class="project-list_item"
					v-for="item in projectList.slice((page - 1) * 14, page * 14)"
				>
					<div class="project_list_item_proimg_wrap">
						<img :src="item.thumbnailImage" class="project_list_item_proimg" />
						<div class="project_list_item_operator_wrap">
							<div
								class="locked"
								v-if="item.isPublish && !item.isDelete && item.needpassword"
							>
								<i class="el-icon-lock"></i>
							</div>
							<div class="project_list_item_operator_top"></div>
							<div class="project_list_item_operator_bottom">
								<el-tooltip
									class="item"
									effect="dark"
									content="发布"
									placement="top-start"
								>
									<div
										class="pllist"
										:data-id="item._id"
										@click="showpublishDialogfn(item._id)"
										v-show="!item.isPublish && !item.isDelete"
									>
										<img src="../../assets/menuimg/9.png" />
									</div>
								</el-tooltip>
								<el-tooltip
									class="item"
									effect="dark"
									content="复制"
									placement="top-start"
								>
									<div
										class="pllist"
										:data-id="item._id"
										@click="onCopyProject"
										v-show="!item.isPublish && activeMenu != 'remove'"
									>
										<img src="../../assets/menuimg/7.png" />
									</div>
								</el-tooltip>
								<el-tooltip
									class="item"
									effect="dark"
									content="删除"
									placement="top-start"
								>
									<div
										class="pllist"
										:data-id="item._id"
										:data-title="item.title"
										@click="onDeleteProject"
										v-show="!item.isPublish && activeMenu != 'remove'"
									>
										<img src="../../assets/menuimg/8.png" />
									</div>
								</el-tooltip>
								<el-tooltip
									class="item"
									effect="dark"
									content="还原"
									placement="top-start"
								>
									<i
										:data-id="item._id"
										:data-title="item.title"
										@click="onUnDeleteProject"
										class="el-icon-refresh-left"
										v-show="activeMenu == 'remove'"
									></i>
								</el-tooltip>
								<el-tooltip
									class="item"
									effect="dark"
									content="设置为模板"
									placement="top-start"
								>
									<div
										class="pllist"
										:data-id="item._id"
										@click="onTemplateCreate"
										v-show="!item.isPublish && !item.isDelete"
									>
										<img src="../../assets/menuimg/6.png" />
									</div>
								</el-tooltip>
								<div class="project_list_item_operator_middle">
									<el-tooltip
										class="item"
										effect="dark"
										content="浏览发布界面"
										placement="top-start"
									>
										<div
											:data-id="item._id"
											@click="showpwdDialogfn(item._id, item.needpassword)"
											class="project_list_item_edit"
											v-show="item.isPublish"
										>
											查看
										</div>
									</el-tooltip>
								</div>
							</div>
							<div class="project_list_item_operator_middle">
								<div
									:data-id="item._id"
									@click="onPreview"
									class="project_list_item_edit item_preview"
									v-show="!item.isPublish && !item.isDelete"
								>
									预览
								</div>
								<div
									:data-id="item._id"
									@click="onEditProject"
									class="project_list_item_edit"
									v-show="!item.isPublish && !item.isDelete"
								>
									编辑
								</div>
							</div>
						</div>
					</div>
					<div class="project_list_item_name_wrap">
						<i class="el-icon-edit" @click="changenameDialog(item)"></i>
						<el-tooltip
							class="item lighttooltip"
							effect="light"
							:content="item.title"
							placement="bottom-start"
							:disabled="
								item.title.length && item.title.length > 10 ? false : true
							"
						>
							<div class="projecttitle">{{ item.title }}</div>
						</el-tooltip>
						<span
							:class="
								item.isPublish
									? 'project_list_pstatusa'
									: 'project_list_pstatus'
							"
						>
							{{ item.isPublish ? "已发布" : "未发布" }}
						</span>
					</div>
				</div>
			</div>
			<div class="pagination">
				<el-pagination
					background
					:current-page.sync="page"
					:page-size="14"
					layout="total, prev, pager, next"
					:total="projectList.length || 0"
				>
				</el-pagination>
			</div>
		</div>
		<y-dialog
			:isShow="showAddDialog"
			title="添加分组"
			@close="showAddDialog = false"
		>
			<el-input
				placeholder="添加分组"
				v-model="groupinput"
				maxlength="20"
			></el-input>
			<div class="sDialogline">
				<el-button @click="fetch_addGroup" type="primary" size="medium"
					>确 定</el-button
				>
			</div>
		</y-dialog>
		<y-dialog
			:isShow="showEditDialog"
			title="修改分组名称"
			@close="showEditDialog = false"
		>
			<el-input
				placeholder="修改分组"
				v-model="editgroupinput"
				maxlength="20"
			></el-input>
			<div class="sDialogline">
				<el-button @click="fetchsetgroup()" type="primary" size="medium"
					>确 定</el-button
				>
			</div>
		</y-dialog>
		<y-dialog
			:isShow="showpublishDialog"
			title="发布大屏"
			@close="showpublishDialog = false"
		>
			<p>
				发布后，会推送到已发布广场，他人可以通过发布广场访问大屏，加密发布需要输入密码才可访问大屏。
			</p>
			<br />
			<el-checkbox v-model="needpassword">是否加密发布</el-checkbox>
			<br /><br />
			<el-input
				placeholder="设置发布大屏密码"
				v-model="editpublishinput"
				maxlength="16"
				:disabled="!needpassword"
			></el-input>
			<div class="sDialogline">
				<el-button @click="onPublish" type="primary" size="medium"
					>确 定</el-button
				>
			</div>
		</y-dialog>
		<y-dialog
			:isShow="showpwdDialog"
			title="密码验证"
			@close="showpwdDialog = false"
		>
			<p>请输入正确的密码访问大屏</p>
			<br />
			<el-input
				placeholder="访问密码"
				v-model="pwdinput"
				maxlength="16"
			></el-input>
			<div class="sDialogline">
				<el-button @click="oncheckpwd" type="primary" size="medium"
					>确 定</el-button
				>
			</div>
		</y-dialog>
		<y-dialog
			:isShow="showchangenameDialog"
			title="修改大屏项目名称"
			@close="showchangenameDialog = false"
		>
			<el-input
				:data-id="nowitem._id"
				class="project_list_item_name"
				type="text"
				v-model="nowitem.title"
				maxlength="16"
			/>
			<div class="sDialogline">
				<el-button @click="onProjectNameBlur" type="primary" size="medium"
					>确 定</el-button
				>
			</div>
		</y-dialog>
	</div>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			page: 1,
			projectList: [],
			allAmount: 0,
			unpublishAmount: 0,
			publishAmount: 0,
			removeAmount: 0,
			ungroupAmount: 0,
			allpublishAmount: 0,
			showAddDialog: false,
			showEditDialog: false,
			showpublishDialog: false,
			showpwdDialog: false,
			showchangenameDialog: false,
			needpassword: false,
			gopublishID: "",
			groupinput: "",
			editgroupinput: "",
			editpublishinput: "",
			pwdinput: "",
			editId: "",
			groupList: [],
			search: "",
			activeMenu: "all",
			groupID: "",
			type: "all",
			author: "",
			sort: "2",
			sortList: [
				{ label: "按照修改时间排序（升序）", value: "1" },
				{ label: "按照修改时间排序（降序）", value: "2" },
				{ label: "按照创建时间排序（升序）", value: "3" },
				{ label: "按照创建时间排序（降序）", value: "4" },
			],
			nowitem: {},
		};
	},
	created() {
		//加载projectlist
		this.initProjectList();
		this.fetch_myProjects_count();
		this.fetch_getgroupList();
	},
	computed: {
		...mapState({
			userData: (state) => state.user.userData,
		}),
	},
	methods: {
		changenameDialog(item) {
			this.nowitem = JSON.parse(JSON.stringify(item));
			this.showchangenameDialog = true;
			console.log(item);
		},
		recount() {
			this.fetch_getgroupList();
			this.fetch_myProjects_count();
			this.searchGroup();
		},
		searchdata() {
			this.initProjectList(true);
		},
		onNewProject() {
			this.$router.push({ name: "templateCreate" });
		},
		initProjectList(issearch) {
			this.searchGroup(issearch);
		},
		fetchsetgroup() {
			if (this.editgroupinput === "") {
				this.$message.error("请输入分组名称");
				return;
			}
			this.$axios
				.post("/grouplist/setgroup", {
					gid: this.editId,
					name: this.editgroupinput,
				})
				.then((res) => {
					if (res.body && res.status) {
						this.fetch_getgroupList();
						this.showEditDialog = false;
					}
				});
		},
		fetchdeletegroup(gid, name) {
			this.$confirm(
				`${name}分组删除后，分组下的大屏将移入未分组中，确认删除？`,
				"提示",
				{
					iconClass: "el-icon-warning",
					callback: (res) => {
						if (res.action === "confirm") {
							this.$axios
								.post("/grouplist/deletegroup", { gid })
								.then((res) => {
									if (res.body && res.status) {
										this.activeMenu = "all";
										this.type = "all";
										this.$nextTick(() => {
											this.recount();
										});
									}
								});
						}
					},
				}
			);
		},
		fetch_myProjects_unpublish() {
			this.$axios.get("/project/myProjects_unpublish").then((res) => {
				if (res.body && res.body.data && Array.isArray(res.body.data)) {
					this.projectList = res.body.data;
				}
			});
		},
		fetch_myProjects_publish() {
			this.$axios.get("/project/myProjects_publish").then((res) => {
				if (res.body && res.body.data && Array.isArray(res.body.data)) {
					this.projectList = res.body.data;
				}
			});
		},
		myProjects_removed() {
			this.$axios.get("/project/myProjects_removed").then((res) => {
				if (res.body && res.body.data && Array.isArray(res.body.data)) {
					this.projectList = res.body.data;
				}
			});
		},
		fetch_myProjects_count() {
			this.$axios.get("/project/myProjects_amount").then((res) => {
				if (res.body) {
					this.allAmount = res.body.allAmount || 0;
					this.publishAmount = res.body.publishAmount || 0;
					this.unpublishAmount = res.body.unpublishAmount || 0;
					this.removeAmount = res.body.removeAmount || 0;
					this.ungroupAmount = res.body.ungroupAmount || 0;
					this.allpublishAmount = res.body.allpublishAmount || 0;
				}
			});
		},
		fetch_getgroupList() {
			this.$axios.get("/grouplist/getlist").then((res) => {
				if (res.body && Array.isArray(res.body)) {
					this.groupList = res.body;
				}
			});
		},
		fetch_addGroup() {
			this.$axios
				.post("/grouplist/addgroup", { groupinput: this.groupinput })
				.then((res) => {
					if (res) {
						this.fetch_getgroupList();
						this.showAddDialog = false;
					}
				});
		},
		fetch_myProjects_group(params) {
			this.$axios.post("/project/myProjects_group", { params }).then((res) => {
				if (res.body && res.body.data && Array.isArray(res.body.data)) {
					this.projectList = res.body.data.filter((item) => {
						return !item.isTemplate;
					});
				}
			});
		},
		presearchGroup(type, author, groupID) {
			this.type = type;
			this.author = author;
			this.groupID = groupID;
			this.searchGroup(false);
		},
		searchGroup(issearch) {
			!issearch ? (this.search = "") : "";
			const params = {
				type: this.type || "",
				author: this.author || "",
				groupID: this.groupID || "",
				search: this.search || "",
				sort: this.sort || "1",
			};
			this.activeMenu = this.type;
			this.fetch_myProjects_group(params);
		},
		onProjectNameBlur() {
			let _id = this.nowitem._id;
			let arr = this.nowitem;
			if (arr && arr.title && arr.title !== "") {
				this.$axios
					.post("/project/modifyName/" + _id, { title: arr.title })
					.then((res) => {
						if (res.code === 200) {
							console.log(this.projectList);
							const reprojectList = this.projectList.map((item) => {
								if (item._id === _id) {
									item.title = arr.title;
								}
								return item;
							});
							this.projectList = reprojectList;
							this.showchangenameDialog = false;
							this.$msgbox({
								title: "提示",
								message: "项目名已修改",
								iconClass: "el-icon-success",
							});
						}
					});
			} else {
				this.$msgbox({
					title: "提示",
					message: "请输入正确的名称",
					iconClass: "el-icon-error",
				});
			}
		},
		onEditProject(e) {
			let _id = e.currentTarget.dataset.id;
			this.$router.push({
				name: "PowerEditor",
				params: {
					id: _id,
				},
			});
		},
		onDeleteProject(e) {
			let _id = e.currentTarget.dataset.id;
			let title = e.currentTarget.dataset.title || "";
			this.$confirm(`确定要删除 "${title}" 吗`, "提示", {
				iconClass: "el-icon-warning",
				callback: (res) => {
					if (res.action === "confirm") {
						this.$axios
							.post("/project/tempdelete/" + _id)
							.then((res) => {
								if (res.code === 200) {
									let index = this.projectList.findIndex((t) => t._id === _id);
									this.projectList.splice(index, 1);
									this.$msgbox({
										title: "提示",
										message: "删除成功",
										iconClass: "el-icon-success",
									});
									this.recount();
								}
							})
							.catch((e) => {
								console.warn(e.message);
							});
					}
				},
			});
		},
		onUnDeleteProject(e) {
			let _id = e.currentTarget.dataset.id;
			let title = e.currentTarget.dataset.title || "";
			this.$confirm(`确定要还原 "${title}" 吗`, "提示", {
				iconClass: "el-icon-warning",
				callback: (res) => {
					if (res.action === "confirm") {
						this.$axios
							.post("/project/tempUndelete/" + _id)
							.then((res) => {
								if (res.code === 200) {
									let index = this.projectList.findIndex((t) => t._id === _id);
									this.projectList.splice(index, 1);
									this.$msgbox({
										title: "提示",
										message: "还原成功",
										iconClass: "el-icon-success",
									});
								}
								this.recount();
							})
							.catch((e) => {
								console.warn(e.message);
							});
					}
				},
			});
		},
		onTemplateCreate(e) {
			let _id = e.currentTarget.dataset.id;
			this.$axios.post("/project/setTemplate/" + _id).then((res) => {
				if (res.code === 200) {
					this.$msgbox({
						title: "提示",
						message: "已设置为模板",
						iconClass: "el-icon-success",
					});
				}
			});
		},
		onCopyProject(e) {
			let _id = e.currentTarget.dataset.id;
			this.$axios.post("/project/copy/" + _id).then((res) => {
				if (res.code === 200) {
					let project = res.body;
					this.projectList.splice(this.projectList.length - 1, 0, project);
				}
			});
		},
		onPreview(e) {
			let _id = e.currentTarget.dataset.id;
			window.open(`${this.$config.serverURl}/project/view/${_id}`, "_blank");
		},
		onPublish(e) {
			let _id = e.currentTarget.dataset.id;
			this.$axios
				.post("/project/publish/" + this.gopublishID, {
					needpassword: this.needpassword,
					editpublishinput: this.editpublishinput,
				})
				.then((res) => {
					if (res.code === 200) {
						// let index = this.projectList.findIndex((t) => t._id === _id);
						// let project = this.projectList[index];
						// project.isPublish = true;
						// this.projectList.splice(index, 1, project);
						this.presearchGroup("publish", "", "");
						this.$msgbox({
							title: "提示",
							message: "已发布",
							iconClass: "el-icon-success",
						});
						this.showpublishDialog = false;
						this.recount();
					} else {
						this.$msgbox({
							title: "提示",
							message: "发布失败",
							iconClass: "el-icon-error",
						});
					}
				});
		},
		showpwdDialogfn(pwd, needpassword) {
			this.gopublishID = pwd;
			needpassword ? (this.showpwdDialog = true) : this.onPublishLink();
		},
		oncheckpwd() {
			this.$axios
				.post("/project/ckeckpublishpwd", {
					id: this.gopublishID,
					pwd: this.pwdinput,
				})
				.then((res) => {
					if (res.body) {
						this.onPublishLink();
						this.showpwdDialog = false;
					} else {
						this.$msgbox({
							title: "提示",
							message: "密码错误，请重新输入。",
							iconClass: "el-icon-error",
						});
					}
				});
		},
		onPublishLink() {
			let _id = this.gopublishID;
			let token = this.userData.token;
			window.open(
				`${this.$config.serverURl}/project/verify/${_id}/${token}`,
				"_blank"
			);
		},
		showAddGroup() {
			this.showAddDialog = true;
		},
		showEdit(id) {
			this.showEditDialog = true;
			this.editId = id;
		},
		showpublishDialogfn(e) {
			this.gopublishID = e;
			this.showpublishDialog = true;
		},
	},
};
</script>

<style lang="stylus" scoped>
/**
 *   定义缩放的样式
* */
>>>{
	.el-pagination__total{
		color:#ccc
	}
	.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
		background-color: #2d2e32;
	}
}
@keyframes growthScale {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}
.group-line {
	width: 100%;
	height: 1px;
	margin: 10px 0;
	background: #666;
}
.project-create {
	display: flex;
	flex-direction: row;
	width: 100%;
	background: rgb(23, 27, 34);
	overflow: hidden;
	/**
	 *   项目分组
																																															    * */
	.project-group_wrap {
		display: flex;
		flex-direction: column;
		width: 270px;
		min-width: 270px;
		height: 100%;
		overflow: hidden;
		font-size: 14px;
		background: #1E1F25;
		.project-group_btns {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			height: 54px;
			width: 100%;
			color: rgb(251, 251, 251);
			.project-group_btn_add {
				font-size: 16px;
				margin-right: 17px;
				cursor: pointer;
			}
			.project-group_btn_add:hover {
				color:#409EFF
			}
			.project-group_label {
				width: 100%;
				margin-left: 20px;
				white-space: nowrap;
			}
		}
		.project-group_names {
			cursor: pointer;
			.project-group_name {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 45px;
				color: rgb(149, 160, 171);
				.project-group_title {
					width: 210px;
					margin-left: 20px;
					white-space: nowrap;
					font-size: 14px;
					display: flex;
					clear: both;
					.option {
						display: none;
						color:#fff
					}
					.title {
						width: 170px;
						// max-width: 100px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.project-group_count {
					width: 20px;
					text-align: right;
				}
				&.active-group_name {
					color: #5488FF;
					background: #2A303B;
					// background-image: linear-gradient(to right, rgb(13, 92, 250), rgb(17, 62, 94));
				}
			}
			.project-group_name:hover .option {
				display: block;
				color:#fff
				.el-icon-edit:hover{
					color:#409EFF
				}
				.el-icon-delete:hover{
					color:#409EFF
				}
			}
		}
	}
	/**
	 *   项目列表
																																															    * */
	.project-list_wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		/**
		 *   项目配额信息
																																																																																														        * */
		.project-list_header {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 56px;
			color: rgb(179, 194, 207);
			font-size: 13px;
			.project-list_info {
				width: calc(100% - 420px);
				.project-list_title {
					font-size: 14px;
					color: rgb(36, 136, 230);
					width: 68px;
					text-align: center;
					border-left: 2px solid rgb(32, 97, 182);
				}
				.project-list_nums, .project-list_rests, .el-icon-question, .project-list_operator {
					color: rgb(36, 136, 230);
				}
				.project-list_nums, .project-list_rests, .el-icon-question {
					padding: 0px 3px;
				}
				.project-list_operator {
					margin-left: 20px;
				}
			}
			.project-list_search {
				display: flex;
				padding-right: 10px;
				align-items: center;
				.project-list_search_input {
					width: 186px;
					height: 30px;
					background: rgb(29, 38, 42);
					color: #fff;
					padding-left: 10px;
				}
				.project-list_search_icon {
					background: rgb(29, 38, 42);
					height: 30px;
					line-height: 30px;
					padding: 0px 10px;
				}
			}
			.project-list_sort {
				display: flex;
				padding-right: 10px;
				width: 100%;
				align-items: center;
			}
		}
		/* *j
		 *   项目列表
																																																																																														        * */
		.project-list_body {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			overflow: auto;
			padding: 10px 10px 0 36px;
			.project-list_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: #2D2E32;
				color: white;
				height: 205px;
				width: 294px;
				// border: 2px solid rgb(58, 70, 89);
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 6px;
				overflow: hidden;
				margin: 0 24px 24px 0;
				// &.project-list_active {
				// border: 2px solid rgb(25, 105, 187);
				// }
				&:hover {
					// border: 2px solid rgb(25, 105, 187);
					.project_list_item_proimg_wrap .project_list_item_operator_wrap {
						opacity: 1;
					}
				}
				/**
				 *   项目创建窗口
																																																																																																																																																																																												                * */
				.project-list_new {
					display: flex;
					align-items: center;
					border: 1px solid rgb(25, 105, 187);
					border-radius: 10px;
					padding: 15px 35px;
					cursor: pointer;
					font-size: 13px;
					text-align: center;
					i {
						font-size: 12px;
					}
					&:hover {
						transform: scale(1.05);
						width: 160px;
						font-size: 15px;
						animation: growthScale 0.3s;
						background: rgb(25, 105, 187);
						color: white;
					}
				}
				/**
				 *   项目信息详细窗口
																																																																																																																																																																																												                * */
				.project_list_item_proimg_wrap {
					position: relative;
					display: flex;
					height: 100%;
					width: 100%;
					.project_list_item_operator_wrap {
						background: rgba(5, 5, 7, 0.6);
						position: absolute;
						width: 100%;
						top: 0;
						left: 0;
						bottom: 0;
						opacity: 0;
						.project_list_item_operator_top {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 40px;
							padding-right: 3px;
							color: rgb(254, 254, 254);
							i {
								padding: 5px 3px;
								cursor: pointer;
								&:hover {
									color: rgb(38, 129, 255);
								}
							}
						}
						.project_list_item_operator_middle {
							display: flex;
							justify-content: center;
							margin-top: 25px;
							.project_list_item_edit {
								width: 72px;
								height: 35px;
								line-height: 35px;
								text-align: center;
								background: #4A71FF;
								border-radius: 0px;
								color: #fff;
								cursor: pointer;
								&:hover {
									opacity: 0.8;
								}
								&:nth-child(2) {
									margin-left: 15px;
								}
							}
						}
						.project_list_item_operator_bottom {
							display: flex;
							justify-content: center;
							.pllist{
								width 28px
								height 28px
								margin 0 8px
								padding 6px
								>img{
									width 16px
									height 16px
								}
							}
							.pllist:hover{
								background rgba(255,255,255,0.1)
								border-radius: 3px
							}
							i {
								padding: 5px 13px;
								cursor: pointer;
								color: rgb(254, 254, 254);
								font-size:16px;
								&:hover {
									color: rgb(38, 129, 255);
								}
							}
						}
					}
				}
				.project_list_item_name_wrap {
					display: flex;
					flex-direction: row;
					color: rgb(172, 188, 196);
					background: rgb(29, 38, 46);
					height: 38px;
					align-items: center;
					width: 100%;
					font-size: 14px;
					height: 40px;
					line-height: 40px;
					.el-icon-edit {
						margin-left: 10px;
						margin-right: 10px;
						cursor: pointer;
					}
					.el-icon-edit:hover {
						color:#409EFF
					}
					.project_list_item_name {
						width: 100%;
						background: none;
						color: rgb(172, 188, 196);
					}
					.project_list_pstatus {
						color: #fff;
					}
					.project_list_pstatusa {
						color: orange;
					}
				}
			}
			.project-list_item:hover {
				background:#444
				}
		}
	}
}
.addNew {
	cursor: pointer;
	font-size: 20px;
	color: #fff;
	background: #333
	.el-icon-circle-plus-outline {
		font-size: 40px;
		color: #4A71FF;
	}
}
.item_preview {
	background: #576280 !important;
}
.m-r-10 {
	margin-right: 5px;
}
.sDialogline {
	margin-top: 20px;
	text-align: center;
}
.locked {
	position: absolute;
	left: 10px;
	top: 10px;
	font-size: 16px;
}
.lighttooltip {
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 210px;
	padding: 0 10px;
}
</style>
<style>
.el-tooltip__popper.is-light {
	color: #333 !important;
}
.pagination {
	text-align: right;
	padding-right: 50px;
}
</style>
